Carga Robusta de Recursos en React: Dominando los Error Boundaries con Hooks

En las aplicaciones web modernas, la carga de recursos de forma asíncrona es una práctica común. Ya sea obteniendo datos de una API, cargando imágenes o importando módulos, manejar los posibles errores durante la carga de recursos es crucial para una experiencia de usuario fluida. Los Error Boundaries de React proporcionan un mecanismo para capturar errores de JavaScript en cualquier parte de su árbol de componentes hijos, registrar esos errores y mostrar una UI de respaldo en lugar de bloquear toda la aplicación. Este artículo explora cómo usar eficazmente los Error Boundaries junto con los Hooks de React para gestionar los errores de carga de recursos.

Entendiendo los Error Boundaries

Antes de React 16, los errores de JavaScript no controlados durante el renderizado de un componente corrompían el estado interno de React y causaban errores crípticos en renderizados posteriores. Los Error Boundaries solucionan esto actuando como bloques "catch-all" para los errores que ocurren en sus componentes hijos. Son componentes de React que implementan uno o ambos de los siguientes métodos de ciclo de vida:

• static getDerivedStateFromError(error): Este método estático se invoca después de que un componente descendiente haya lanzado un error. Recibe el error que fue lanzado como argumento y devuelve un valor para actualizar el estado del componente.
• componentDidCatch(error, info): Este método de ciclo de vida se invoca después de que un componente descendiente haya lanzado un error. Recibe el error que fue lanzado como argumento, así como un objeto que contiene información sobre qué componente lanzó el error. Puedes usarlo para registrar información del error.

Es importante destacar que los Error Boundaries solo capturan errores en la fase de renderizado, en los métodos de ciclo de vida y en los constructores de todo el árbol debajo de ellos. No capturan errores para:

• Manejadores de eventos (aprende más en la sección de abajo)
• Código asíncrono (p. ej., callbacks de setTimeout o requestAnimationFrame)
• Renderizado del lado del servidor
• Errores lanzados en el propio Error Boundary (en lugar de en sus hijos)

Error Boundaries y Hooks de React: Una Combinación Poderosa

Aunque los componentes de clase se usaban tradicionalmente para implementar Error Boundaries, los Hooks de React ofrecen un enfoque más conciso y funcional. Podemos crear un hook reutilizable useErrorBoundary que encapsule la lógica de manejo de errores y proporcione una forma conveniente de envolver componentes que puedan lanzar errores durante la carga de recursos.

Creando un Hook useErrorBoundary Personalizado

Aquí hay un ejemplo de un hook useErrorBoundary:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
Ocurrió un error: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Explicación:

• useState: Usamos useState para gestionar el estado del error. Inicialmente establece el error en null.
• useCallback: Usamos useCallback para memoizar las funciones resetError y captureError. Esta es una buena práctica para evitar re-renderizados innecesarios si estas funciones se pasan como props.
• Componente ErrorBoundary: Este es un componente funcional creado con useCallback que toma children y un prop opcional fallback. Si existe un error en el estado, renderiza el componente fallback proporcionado o un mensaje de error por defecto. De lo contrario, renderiza los hijos. Esto actúa como nuestro Error Boundary. El array de dependencias `[error]` asegura que se vuelva a renderizar cuando el estado de `error` cambie.
• Función captureError: Esta función se usa para establecer el estado del error. La llamarás dentro de un bloque try...catch al cargar recursos.
• Función resetError: Esta función limpia el estado del error, permitiendo que el componente vuelva a renderizar a sus hijos (potencialmente reintentando la carga del recurso).

Implementando la Carga de Recursos con Manejo de Errores

Ahora, veamos cómo usar este hook para manejar errores de carga de recursos. Considera un componente que obtiene datos de usuario de una API:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`¡Error HTTP! estado: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      No se pudieron cargar los datos del usuario. Reintentar